<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
</head>
<body>
  <div class="content">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li class="layui-this">远程控制</li>
        <li>运行状态</li>
        <li>参数状态</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <table class="layui-table" lay-skin="line">
            <thead>
              <tr>
                <th>序号</th>
                <th>变量名</th>
                <th>变量值</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>手动运行</td>
                <td>开</td>
                <td>手动开启时，自动需关闭</td>
              </tr>
              <tr>
                <td>2</td>
                <td>自行运行</td>
                <td>关 </td>
                <td>自动开启时，手动需关闭</td>
              </tr>
              <tr>
                <td>3</td>
                <td>自行运行</td>
                <td>关 </td>
                <td>自动开启时，手动需关闭</td>
              </tr>
              <tr>
                <td>4</td>
                <td>自行运行</td>
                <td>关 </td>
                <td>自动开启时，手动需关闭</td>
              </tr>
              <tr>
                <td>5</td>
                <td>自行运行</td>
                <td>关 </td>
                <td>自动开启时，手动需关闭</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="layui-tab-item">
          <table class="layui-table" lay-skin="line">
            <thead>
              <tr>
                <th>序号</th>
                <th>变量名</th>
                <th>变量值</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>破碎机电源缺相</td>
                <td><i class="layui-icon">&#xe643;</i> </td>
                <td>红色为故障，绿色为正常</td>
              </tr>
              <tr>
                <td>2</td>
                <td>格栅状态</td>
                <td><i class="layui-icon">&#xe643;</i> </td>
                <td>红色为故障，绿色为正常</td>
              </tr>
              <tr>
                <td>3</td>
                <td>一号水泵状态</td>
                <td><i class="layui-icon">&#xe643;</i> </td>
                <td>红色为故障，绿色为正常</td>
              </tr>
              <tr>
                <td>4</td>
                <td>二号水泵状态</td>
                <td><i class="layui-icon">&#xe63f;</i> </td>
                <td>红色为故障，绿色为正常</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="layui-tab-item">
          <table class="layui-table" lay-skin="line">
            <thead>
              <tr>
                <th>序号</th>
                <th>变量名</th>
                <th>变量值</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>第一组格栅启动时设定</td>
                <td>7 时 </td>
                <td>红色为故障，绿色为正常</td>
              </tr>
              <tr>
                <td>2</td>
                <td>格栅状态</td>
                <td>10 时 </td>
                <td>格栅启动小时设定</td>
              </tr>
              <tr>
                <td>3</td>
                <td>第二组格栅启动时设定</td>
                <td>12 时</td>
                <td>格栅启动小时设定</td>
              </tr>
              <tr>
                <td>4</td>
                <td>第二组格栅启动时设定</td>
                <td>12 时</td>
                <td>格栅启动小时设定</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <script>

  layui.use('element', function(){
    var element = layui.element();

    //…
  });
  </script>
</body>
</html>
